<template>
	<div class="padding20 member">
		<div class="form">
			<el-form @submit.native.prevent @keyup.enter.native="toSearch" inline>
				<el-form-item>
					<el-input
						prefix-icon="el-icon-search"
						v-model="search.phone"
						autocomplete="off"
						placeholder="请输入手机号"
						clearable
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-input
						prefix-icon="el-icon-search"
						v-model="search.nickName"
						autocomplete="off"
						placeholder="请输入昵称"
						clearable
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-date-picker
						v-model="createDate"
						type="daterange"
						align="right"
						unlink-panels
						range-separator="-"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						:picker-options="pickerOptions"
						value-format="yyyy-MM-dd HH:mm:ss"
					></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="medium" icon="el-icon-search" @click="toSearch"></el-button>
				</el-form-item>
			</el-form>
		</div>
		<el-table :data="tableData" row-key="id">
			<el-table-column prop="avatar" label="头像" width="120">
				<template slot-scope="scope">
					<el-image
						v-if="scope.row.avatar"
						:src="scope.row.avatar"
						style="width: 60px; height: 60px; border-radius: 50%;"
						:preview-src-list="[scope.row.avatar]"
					/>
				</template>
			</el-table-column>
			<el-table-column prop="nickName" label="用户昵称" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="phone" label="手机号" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="createTime" label="注册时间" :show-overflow-tooltip="true"></el-table-column>
			<!-- <el-table-column prop="createTime" label="积分 / 余额" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="createTime" label="成交" :show-overflow-tooltip="true"></el-table-column> -->
			<!-- <el-table-column prop="createTime" label="来源" :show-overflow-tooltip="true"></el-table-column> -->
			<el-table-column label="操作" :show-overflow-tooltip="true">
				<template #default="{row}">
					<el-button
						v-if="$tools.hasPermission('member:member:edit')"
						size="mini"
						@click="handleEdit(row)"
						icon="el-icon-edit"
						type="warning"
						title="编辑"
					></el-button>
					<!-- <el-button
						v-if="$tools.hasPermission('member:member:edit')"
						size="mini"
						@click="handleFinance(row)"
						icon="el-icon-s-finance"
						type="primary"
						title="充值"
					></el-button> -->
					<el-popconfirm
						confirm-button-text="删除"
						cancel-button-text="取消"
						icon="el-icon-info"
						icon-color="red"
						title="确定删除吗？"
						@confirm="handleDelete(row)"
						v-if="$tools.hasPermission('member:member:delete')"
					>
						<template #reference>
							<el-button size="mini" type="danger" icon="el-icon-delete" title="删除"></el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<br />
		<fortress-pagination
			:total="total"
			:current-page="current"
			:page-size="size"
			@refreshData="onCurrentSizeChange"
		></fortress-pagination>
		<member-finance ref="MemberFinanceRef"></member-finance>
	</div>
</template>

<script>
import { memberPage, memberDel, memberDelBatch, memberDynamicExport } from "@/api/member/member.js"
import FortressPagination from "@/components/fortress-pagination.vue"
import MemberFinance from "./member-finance.vue"

export default {
	name: "member",
	props: {},
	data() {
		return {
			createDate: [],
			search: {
				userName: "",
				phone: "",
				status: "",
				nickName: "",
				auditStatus: "",
			},
			YesNoList: [],
			MemberStatusList: [],
			levelIdList: [],
			tableData: [],
			total: 0,
			current: 1,
			size: 10,
			pickerOptions: {
				shortcuts: [
					{
						text: "最近一周",
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
							picker.$emit("pick", [start, end])
						},
					},
					{
						text: "最近一个月",
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
							picker.$emit("pick", [start, end])
						},
					},
					{
						text: "最近三个月",
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
							picker.$emit("pick", [start, end])
						},
					},
				],
			},
		}
	},
	computed: {},
	created() {
		this.toSearch()
	},
	methods: {
		toSearch() {
			this.current = 1
			this.tableData = []
			if (!this.createDate) {
				this.createDate = []
			}
			this.search.startTime = this.createDate[0] || ""
			this.search.endTime = this.createDate[1] || ""
			this.getList()
		},
		async getList() {
			try {
				const { code, data, msg } = await memberPage({
					current: this.current,
					size: this.size,
					...this.search,
				})
				if (code != 0) {
					throw new Error(msg)
				}
				this.tableData = data.records
				this.total = data.total
			} catch (error) {
				this.$msg({
					message: error,
					type: "error",
				})
			}
		},
		onCurrentSizeChange({ current, size }) {
			this.current = current
			this.size = size
			this.getList()
		},

		handleEdit(row) {
			this.$router.push("/member/member-edit?id=" + row.id)
		},
		handleFinance(row) {
			this.$refs.MemberFinanceRef.show(row)
		},
		handleDelete(row) {
			memberDel(row.id).then(resp => {
				if (resp.code == 0) {
					this.$message({
						type: "success",
						message: "操作成功!",
					})
					//判断是否最后一页的最后一条记录
					let totalPages =
						(this.page.total - 1) % this.page.size == 0
							? (this.page.total - 1) / this.page.size
							: (this.page.total - 1) / this.page.size + 1
					if (this.page.current > totalPages && this.page.current != 1) {
						this.page.current = this.page.current - 1
					}
					this.getList()
				} else {
					this.$msg({
						message: resp.msg,
						type: "error",
					})
				}
			})
		},

		levelIdFmt(row) {
			let name = ""
			if (this.levelIdList) {
				this.levelIdList.forEach(item => {
					if (item.code == row.levelId) {
						name = item.name
					}
				})
			}
			return name
		},
	},
	components: {
		FortressPagination,
		MemberFinance,
	},
}
</script>

<style lang="scss" scoped>
.member {
	.form {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
}
</style>
